<template>
  <div class="page-cont">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <van-form
        ref="vform"
        @submit="onSubmit"
      >
        <van-field
          type="password"
          v-model="form.oldpassword"
          placeholder="输入原密码"
          :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
          type="password"
          v-model="form.password"
          placeholder="输入新密码"
          :rules="[{ required: true, message: '请填写新密码', validator: validatorPwd }]"
        />
        <van-field
          type="password"
          v-model="form.password2"
          placeholder="再次输入密码"
          :rules="[{ message: '两次密码输入不一致', validator: validatorPwd2 }]"
        />
      </van-form>      
      <div class="tips">
        密码规则：<br>
        密码必须包含字母或者数字，长度不小于6位
      </div>
    </div>
    <van-button
      type="info"
      block
      @click="enterForm"
    >
      确认
    </van-button>
  </div>
</template>

<script>
export default {
  name: "MyPwdPage",
  data() {
    return {
      form: {
        oldpassword: '',
        password: '',
        password2: '',
      }
    };
  },
  methods: {
    validatorPwd(value, rule) {
      let reg = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,}$/;
      if (!reg.test(value)) {
        rule.message = '密码复杂度不符合要求'
        return false
      }
      return true
    },
    validatorPwd2(value) {
      if (value === this.form.password) {
        return true;
      }
      return false;
    },
    enterForm() {
      this.$refs.vform.submit()
    },
    async onSubmit() {
      let data = {
        oldPassword: this.form.oldpassword,
        newPassword: this.form.password,
        passwordAgain: this.form.password2
      }
      this.$toast.loading({  message: '加载中...', forbidClick: true });
      await this.api.CHANGE_USER_PWD(data)
      this.$toast.clear()

      this.$toast.success('修改成功')
      this.$router.go(-1)
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
